import { rgb } from 'geotiff'
import React, { useEffect, useState } from 'react'
import { Table, Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { fromCircle } from 'ol/geom/Polygon';

import { resourcePath } from '../../../../../../../utils/resource';
import CztApi from '../../../../../../../utils/apis/CztApi';


export default function Xq(props) {
    const { onName } = props;
    const [xq, xqset] = useState();
    const [data, setData] = useState()

    const handleClick = (record) => {
        console.log('record', record)
        onName(record)
    }

    const { datas1, datas2, datas3 } = props;
    const columns = [
        {
            title: datas3 === 1 ? '承灾体名称' : '减灾资源',
            dataIndex: 'title',

        },
        {
            width: 80,
            render: (text, record) => {
                return <Button size='small' type='link' onClick={() => {
                    handleClick(record)
                }}>详情</Button>

            }
        }];

    useEffect(() => {
        // datas3取值1，2。1：影响范围。2：救援保障。现接口获取回的数据仅名称。
        const { datas3 } = props;
        if (datas3 === 1) {
            CztApi.cztxq(datas1, fromCircle(datas2)).then(resp => {
                setData(resp.data);
            })
        } else {
            CztApi.jzzyxq(datas1, fromCircle(datas2)).then(resp => {
                setData(resp.data);
            })

        }
    }, [datas1, datas2, datas3, props])



    return props.datas1 ? (
        <div style={{
            width: 350,
            position: "absolute",
            right: 30,
            top: 30,
            bottom: 30,
            background: 'rgba(1,15,31,0.5)',
            // border: '1px solid rgba(9,107,225,0.8)',
            pointerEvents: 'auto',
            overflow: "auto",
            borderRadius: 8
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>
                    <div style={{
                        background: `url(${resourcePath.blockTitleBg})`,
                        height: 36,
                        backgroundSize: '100% 100%',
                        fontSize: 18,
                        lineHeight: '36px',
                        paddingLeft: 12,
                        fontWeight: "bold",
                        overflow: "hidden"
                    }} title={"qqqqqqqqqqqqqqqqqqqqqqqqqqq"}>
                        {/* 这里标题 */}
                        {props.datas1}
                    </div>
                </div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                        background: "#00000000"
                    }} onClick={e => {
                        props.onClose?.()
                    }} />
                </div>
            </div>
            <Table style={{ margin: 10 }}
                // rowSelection={{
                //     type: selectionType,
                //     ...rowSelection,
                // }}
                columns={columns}
                dataSource={data}
            />
        </div>
    ) : null
}
